<template>
  <view class="flex-col min-h-100vh bg-primary-1">
    <!-- 顶部导航栏（兼容H5和APP） -->
    <view class="bg-primary-6 p-30 flex-between-center">
      <view class="flex-y-center">
        <text class="fs-32 fw-600 c-fff">订单详情</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view 
      class="flex-1" 
      scroll-y 
      :show-scrollbar="false"
      @scrolltolower="onScrollToLower"
    >
      <view class="p-20">
        <!-- 订单状态卡片 -->
        <view class="bgc-fff rd-20 p-30 mb-20 shadow-s">
          <view class="flex-between-center mb-20">
            <view class="flex-y-center">
              <text class="fs-36 fw-600 c-333">待处理</text>
              <text class="fs-20 bg-warning-6 c-fff rd-10 px-10 py-4 ml-20">广告</text>
            </view>
            <text class="fs-24 c-999">2025-09-24 11:24:01</text>
          </view>
          
          <view class="flex-y-center border-t border-info-4 pt-20">
            <view class="w-120 h-120 rd-10 bg-primary-5 flex-center">
              <text class="fs-24 c-fff">商品图</text>
            </view>
            <view class="ml-20 flex-col flex-1">
              <text class="fs-28 fw-500 c-333 mb-8">广电霞光卡</text>
              <text class="fs-24 c-999">订单编号 HKB20250924112401986</text>
            </view>
          </view>
        </view>

        <!-- 订单详情 -->
        <view class="bgc-fff rd-20 p-30 mb-20 shadow-s">
          <text class="fs-28 fw-600 c-333 mb-20">订单详情</text>
          
          <view class="flex-col space-y-20">
            <view class="flex-between-center">
              <text class="fs-24 c-999 w-160 flex-shrink-0">订单编号</text>
              <text class="fs-24 c-333 flex-1 text-right text-hidden-1">HKB20250924112401986</text>
            </view>
            
            <view class="flex-between-center">
              <text class="fs-24 c-999 w-160 flex-shrink-0">销售代理</text>
              <text class="fs-24 c-333 flex-1 text-right">君莫笑</text>
            </view>
            
            <view class="flex-between-center">
              <text class="fs-24 c-999 w-160 flex-shrink-0">下单时间</text>
              <text class="fs-24 c-333 flex-1 text-right">2025-09-24 11:24:01</text>
            </view>
            
            <view class="flex-between-center">
              <text class="fs-24 c-999 w-160 flex-shrink-0">订购号码</text>
              <text class="fs-24 color-primary flex-1 text-right">未选择</text>
            </view>
          </view>
        </view>

        <!-- 客户信息 -->
        <view class="bgc-fff rd-20 p-30 mb-20 shadow-s">
          <text class="fs-28 fw-600 c-333 mb-20">客户信息</text>
          
          <view class="flex-col space-y-20">
            <view class="flex-between-center">
              <text class="fs-24 c-999 w-160 flex-shrink-0">客户姓名</text>
              <text class="fs-24 c-333 flex-1 text-right">郭恒</text>
            </view>
            
            <view class="flex-between-center">
              <text class="fs-24 c-999 w-160 flex-shrink-0">联系电话</text>
              <text class="fs-24 c-333 flex-1 text-right">18903869610</text>
            </view>
            
            <view class="flex-between-center">
              <text class="fs-24 c-999 w-160 flex-shrink-0">身份证号</text>
              <text class="fs-24 c-333 flex-1 text-right">43010419730925351X</text>
            </view>
            
            <view class="flex">
              <text class="fs-24 c-999 w-160 flex-shrink-0">客户地址</text>
              <text class="fs-24 c-333 flex-1 text-right break-word">
                河南省郑州市金水区怡丰新都汇19号楼
              </text>
            </view>
          </view>
        </view>

        <!-- 生产状态 -->
        <view class="bgc-fff rd-20 p-30 shadow-s">
          <text class="fs-28 fw-600 c-333 mb-20">生产状态</text>
          
          <view class="flex-col space-y-30">
            <!-- 订单提交 -->
            <view class="flex-y-center">
              <view class="flex-col items-center mr-20">
                <view class="w-24 h-24 rd bg-success-6 flex-center">
                  <text class="fs-16 c-fff">✓</text>
                </view>
                <view class="w-2 h-40 bg-success-3 mt-4"></view>
              </view>
              <view class="flex-1">
                <text class="fs-24 fw-500 c-333 block">订单提交</text>
                <text class="fs-22 c-999">2025-09-24 11:24:01</text>
              </view>
            </view>
            
            <!-- 受理失败 -->
            <view class="flex-y-center">
              <view class="flex-col items-center mr-20">
                <view class="w-24 h-24 rd bg-error-6 flex-center">
                  <text class="fs-16 c-fff">✗</text>
                </view>
                <view class="w-2 h-20 bg-info-4 mt-4"></view>
              </view>
              <view class="flex-1">
                <text class="fs-24 fw-500 c-333 block">受理失败</text>
                <text class="fs-22 c-999">2025-09-24 11:34:46</text>
                <text class="fs-22 color-error mt-4">请检查客户信息后重新提交</text>
              </view>
            </view>
            
            <!-- 下一步状态（灰色未完成） -->
            <view class="flex-y-center opacity-50">
              <view class="flex-col items-center mr-20">
                <view class="w-24 h-24 rd bg-info-5 flex-center">
                  <text class="fs-16 c-fff">...</text>
                </view>
              </view>
              <view class="flex-1">
                <text class="fs-24 fw-500 c-999 block">等待处理</text>
                <text class="fs-22 c-999">预计完成时间</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 底部空白区域 -->
        <view class="h-40"></view>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="p-20 bgc-fff border-t border-info-4 safe-area-inset-bottom">
      <view class="flex-between-center">
        <view 
          class="flex-1 flex-center p-24 rd-10 border-w-2 border-primary-6 mr-10 transition-2 active:bg-primary-1"
          @click="handleContact"
        >
          <text class="fs-28 color-primary-6">联系客户</text>
        </view>
        
        <view 
          class="flex-1 flex-center p-24 rd-10 bg-error-6 ml-10 transition-2 active:bg-error-7"
          @click="handleReject"
        >
          <text class="fs-28 c-fff">拒绝订单</text>
        </view>
        
        <view 
          class="flex-1 flex-center p-24 rd-10 bg-success-6 ml-10 transition-2 active:bg-success-7"
          @click="handleProcess"
        >
          <text class="fs-28 c-fff">处理订单</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="fixed top-0 left-0 w-100vw h-100vh flex-center bgc-mask z-999">
      <view class="animate-spin-20 w-60 h-60 border-w-4 border-primary rd border-t-transparent"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    }
  },
  
  onLoad(options) {
    if (options.orderId) {
      this.loadOrderDetail(options.orderId)
    }
  },
  
  onUnload() {
	  
  },
  
  methods: {
    getCurrentTime() {
      const now = new Date()
      return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
    },
    
    async loadOrderDetail(orderId) {
      this.loading = true
      try {
        await new Promise(resolve => setTimeout(resolve, 800))
        // 模拟数据加载
      } catch (error) {
        this.$u.toast('加载失败')
      } finally {
        this.loading = false
      }
    },
    
    onScrollToLower() {
      // 滚动到底部处理
    },
    
    handleContact() {
      uni.makePhoneCall({
        phoneNumber: '18903869610'
      })
    },
    
    handleReject() {
      this.$u.modal({
        title: '确认拒绝',
        content: '确定要拒绝此订单吗？',
        confirmColor: '#D9514C'
      }).then(() => {
        this.$u.toast('订单已拒绝')
      })
    },
    
    handleProcess() {
      this.$u.modal({
        title: '处理订单',
        content: '确定要开始处理此订单吗？',
        confirmColor: '#07C160'
      }).then(() => {
        this.$u.toast('开始处理订单')
      })
    }
  }
}
</script>

<style lang="scss">
/* 安全区域适配 */
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 间距工具类 */
.space-y-20 > * + * {
  margin-top: 20rpx;
}

.space-y-30 > * + * {
  margin-top: 30rpx;
}

.w-160 {
  width: 160rpx;
}

/* 激活状态 */
.active\:bg-primary-1:active {
  background-color: var(--color-primary-1);
}

.active\:bg-error-7:active {
  background-color: var(--color-error-7);
}

.active\:bg-success-7:active {
  background-color: var(--color-success-7);
}

.border-t-transparent {
  border-top-color: transparent;
}

/* H5特定样式 */
/* #ifdef H5 */
.min-h-100vh {
  min-height: 100vh;
}
/* #endif */

/* APP特定样式 */
/* #ifdef APP-PLUS */
.min-h-100vh {
  min-height: 100vh;
}
/* #endif */
</style>